<template>
	<view class="container">
		<view class="item">
			<image :src="info.module_info.imageUrl" mode=""></image>
			<view class="detail">
				<text class="title">{{ info.module_info.title }}</text>
				<text>姓名: {{ info.name }}, 电话: {{ info.phone }}</text>
				<text>备注: {{ info.content }}</text>
			</view>
		</view>
		<view class="status">
			<u-radio-group v-model="value" @change="radioGroupChange">
				<u-radio 
					shape="square"
					active-color="#4caf50"
					v-for="(item, index) in list" :key="index" 
					:name="item.name"
				>
					{{item.name}}
				</u-radio>
			</u-radio-group>
			<u-input v-model="mark" type="textarea" :border="true" />
			<u-button type="success" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	import { adminMsgDetail, adminhandle } from '../../api/api'
	export default {
		data() {
			return {
				list: [
					{
						name: '待处理',
						checked: false,
					},
					{
						name: '处理中',
						checked: false,
					},
					{
						name: '已处理',
						checked: false,
					}
				],
				value: '待处理',
				mark: '',
				info: {},
				status: 0
			};
		},
		watch: {
			status(val) {
				switch(val) {
					case '0': 
						this.value = '待处理'
						break;
					case '1':
						this.value = '处理中'
						break;
					case '2':
						this.value = '已处理'
						break;
				}
			}
		},
		onLoad(options) {
			this.getDetail(options.id)
		},
		methods: {
			getDetail (id) {
				adminMsgDetail({
					token: uni.getStorageSync('userInfo').token,
					id
				}).then(res => {
					if(res.code == 1) {
						this.info = res.data
						this.status = res.data.status
					}
				})
			},
			radioGroupChange(e) {
				switch(e) {
					case '待处理': 
						this.status = '0'
						break;
					case '处理中':
						this.status = '1'
						break;
					case '已处理':
						this.status = '2'
						break;
				}
			},
			submit() {
				adminhandle({
					token: uni.getStorageSync('userInfo').token,
					id: this.info.id,
					status: this.status,
					mark: this.mark
				}).then(res => {
					if(res.code == 1) {
						uni.showToast({
							title: res.msg,
							success: (result) => {
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 1000)
							}
						})
					} else {
						this.$u.toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.item {
	display: flex;
	align-items: center;
	width: 100%;
	background-color: #fff;
	padding: 20rpx;
	image {
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
	}
	.detail {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: #999;
		.title {
			color: #000;
			font-size: 32rpx;
			margin-bottom: 10rpx;
		}
	}
}
.status {
	width: 100%;
	background-color: #fff;
	margin-top: 20rpx;
	padding: 20rpx;
	.u-input {
		margin-top: 20rpx;
	}
	.u-btn--success {
		margin: 30rpx 0;
	}
}
</style>
